<template>
  <div class="root">
    <el-row :gutter="20">
      <el-col :span="12">
        <el-form
          ref="form"
          :model="form"
          label-width="100px"
          style="width: 600px"
        >
          <el-form-item label="活动标题：">
            <el-input
              v-model="form.title"
              placeholder="给活动起个名字"
            ></el-input>
          </el-form-item>
          <el-form-item label="活动地址：">
            <el-input
              v-model="form.address"
              placeholder="输入活动地址"
            ></el-input>
          </el-form-item>
          <el-form-item label="时间：">
            <el-date-picker
              class="search-by-time"
              v-model="searchTime"
              type="datetimerange"
              :picker-options="pickerOptions"
              range-separator="至"
              start-placeholder="开始日期"
              end-placeholder="结束日期"
              align="right"
              style="width: 500px;"
            ></el-date-picker>
          </el-form-item>
          <el-form-item label="缴费（元）：">
            <el-input
              v-model="form.moneyCost"
              type="number"
              min="1"
              placeholder="输入金额"
            ></el-input>
          </el-form-item>
          <el-form-item label="活动详情："> </el-form-item>
          <vue-ueditor-wrap
            editor-id="happy-ops"
            :key="$route.query.activityId"
            style="margin: -50px 0 0 100px; width: 700px"
            v-model="form.details"
            :config="editorConfig"
          ></vue-ueditor-wrap>
          <el-form-item style="float:right;marginTop: 20px">
            <el-button type="primary" @click="saveOrEdit">保存</el-button>
            <el-button type="default" @click="$router.push('/')"
              >取消</el-button
            >
          </el-form-item>
        </el-form>
      </el-col>
    </el-row>
  </div>
</template>
<script>
export default {
  data() {
    return {
      editorConfig: {
        // 访问 UEditor 静态资源的根路径，可参考 https://hc199421.gitee.io/vue-ueditor-wrap/#/faq
        UEDITOR_HOME_URL:
          process.env.NODE_ENV == "development"
            ? "/UEditor/"
            : "/nanc-web/UEditor/",
        // UEDITOR_HOME_URL: "/static/UEditor/",
        // 服务端接口（这个地址是我为了方便各位体验文件上传功能搭建的临时接口，请勿在生产环境使用！！！）
        serverUrl: process.env.VUE_APP_COS,
        initialFrameHeight: 400,
        // makeFileActionName: 'http://111.229.247.161:9001/helper/qiniu/token'
        toolbars: [
          [
            "anchor", //锚点
            "undo", //撤销
            "redo", //重做
            "bold", //加粗
            "indent", //首行缩进
            "snapscreen", //截图
            "italic", //斜体
            "underline", //下划线
            "strikethrough", //删除线
            "subscript", //下标
            "fontborder", //字符边框
            "superscript", //上标
            "formatmatch", //格式刷
            "source", //源代码
            "blockquote", //引用
            "pasteplain", //纯文本粘贴模式
            "selectall", //全选
            "print", //打印
            "preview", //预览
            "horizontal", //分隔线
            "removeformat", //清除格式
            "time", //时间
            "date", //日期
            "unlink", //取消链接
            "insertrow", //前插入行
            "insertcol", //前插入列
            "mergeright", //右合并单元格
            "mergedown", //下合并单元格
            "deleterow", //删除行
            "deletecol", //删除列
            "splittorows", //拆分成行
            "splittocols", //拆分成列
            "splittocells", //完全拆分单元格
            "deletecaption", //删除表格标题
            "inserttitle", //插入标题
            "mergecells", //合并多个单元格
            "deletetable", //删除表格
            "cleardoc", //清空文档
            "insertparagraphbeforetable", //"表格前插入行"
            // "insertcode", //代码语言
            "fontfamily", //字体
            "fontsize", //字号
            "paragraph", //段落格式
            "simpleupload", //单图上传
            "insertimage", //多图上传
            "edittable", //表格属性
            "edittd", //单元格属性
            "link", //超链接
            "emotion", //表情
            "spechars", //特殊字符
            "searchreplace", //查询替换
            //  "map", //Baidu地图
            // "gmap", //Google地图
            "insertvideo", //视频
            "help", //帮助
            "justifyleft", //居左对齐
            "justifyright", //居右对齐
            "justifycenter", //居中对齐
            "justifyjustify", //两端对齐
            "forecolor", //字体颜色
            "backcolor", //背景色
            "insertorderedlist", //有序列表
            "insertunorderedlist", //无序列表
            "fullscreen", //全屏
            "directionalityltr", //从左向右输入
            "directionalityrtl", //从右向左输入
            "rowspacingtop", //段前距
            "rowspacingbottom", //段后距
            "pagebreak", //分页
            "insertframe", //插入Iframe
            "imagenone", //默认
            "imageleft", //左浮动
            "imageright", //右浮动
            "attachment", //附件
            "imagecenter", //居中
            "wordimage", //图片转存
            "lineheight", //行间距
            "edittip ", //编辑提示
            "customstyle", //自定义标题
            "autotypeset", //自动排版
            // "webapp", //百度应用
            "touppercase", //字母大写
            "tolowercase", //字母小写
            // "background", //背景
            //  "template", //模板
            "scrawl", //涂鸦
            // "music", //音乐
            "inserttable", //插入表格
            "drafts" // 从草稿箱加载
            // "charts" // 图表
          ]
        ],
        autoHeightEnabled: true
      },
      form: {
        title: "",
        address: "",
        moneyCost: "",
        startTime: "",
        endTime: "",
        details: ""
      },
      isEdit: false,
      pickerOptions: {
        shortcuts: [
          {
            text: "最近一周",
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
              picker.$emit("pick", [start, end]);
            }
          },
          {
            text: "最近五天",
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 5);
              picker.$emit("pick", [start, end]);
            }
          },
          {
            text: "最近三天",
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 3);
              picker.$emit("pick", [start, end]);
            }
          }
        ]
      },
      searchTime: ""
    };
  },
  watch: {
    searchTime(nval) {
      console.log(nval, "====nval");
      this.form.startTime = Date.parse(new Date(nval[0]))
        .toString()
        .substr(0, 10);
      this.form.endTime = Date.parse(new Date(nval[1]))
        .toString()
        .substr(0, 10);
    }
  },
  created() {
    if (this.$route.query.activityId) {
      this.isEdit = true;
      this.getActivityInfo(true);
    }
    this.$route.meta.title = this.isEdit ? "编辑活动" : "新增活动";
  },
  beforeRouteLeave(t, f, next) {
    this.$route.meta.title = "新增活动";
    next();
  },
  methods: {
    saveOrEdit() {
      console.log("save", this.form);
      // this.$router.push({ name: 'goEditor' })
      const url = this.isEdit ? "edit" : "add";
      const params = {
        title: this.form.title,
        address: this.form.address,
        cost: this.form.moneyCost,
        details: this.form.details,
        startTime: this.form.startTime,
        endTime: this.form.endTime
      };
      if (this.isEdit) {
        params.activityId = this.form.activityId;
      }
      this.req({
        url: `/admin/activity/${url}`,
        data: params,
        method: "POST"
      }).then(
        res => {
          console.log("res :", res);
          if (res.code === 200) {
            this.$message({
              type: "success",
              message: res.msg
            });
            this.$router.push({ name: "activityList" });
          }
        },
        err => {
          console.log("err :", err);
        }
      );
    },
    getActivityInfo(flag = false) {
      this.req({
        url: `/admin/activity/details?activityId=${this.$route.query.activityId}`,
        method: "POST"
      }).then(
        res => {
          console.log("res :", res);
          if (res.code === 200) {
            this.form = res.data;
            if (flag) {
              this.searchTime = [this.form.startTime, this.form.endTime];
            }
          }
        },
        err => {
          console.log("err :", err);
        }
      );
    }
  }
};
</script>
